import { Component } from '@/decorators';
import { Vue } from 'vue-class-component';
import { useStore } from '@/store';
import { storeToRefs } from 'pinia';

@Component({
  name: 'Loading',
  render() {
    const { loading } = storeToRefs(useStore());
    
    return loading.value ? (
      <div class="fixed inset-0 z-50 flex items-center justify-center">
        <div class="bg-black bg-opacity-50 absolute inset-0"></div>
        <div class="w-20 h-20 bg-white rounded-lg flex items-center justify-center relative">
          <div class="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
        </div>
      </div>
    ) : null;
  }
})
export default class Loading extends Vue {} 